*{
  margin: 0;
  padding: 0;
}

body{

  #dowebok{



    .section:nth-child(1){

      padding-top: 50px;
      .logo {
        width: 230px;
        height: 200px;
        margin: 0px auto;
       img{
         width: 100%;
       }
      }

      .text{
        margin:50px auto;
        text-align: center;

        img{
          margin: 0 30px;
          transition: all 1s;
          opacity: 0;
        }
      }

      .info{
        height: 49px;
        background: url("./images/info_1.png") center center no-repeat;
      }
    }

    .section:nth-child(1).current{

        img{
          margin: 0;
          opacity: 1;
        }

    }

    .section:nth-child(2)>div{
      padding-left: 100px;
      display: flex;
      align-items: center;
      div{

      }

      .shield{
        width: 428px;
        height: 498px;

        img:nth-child(3) {
          transition: all 1s;
          transform: translateX(200px);
        }
      }
      .info{

        width: 635px;
        height: 309px;
        margin: 0 auto;

        background: url(./images/info_2.png) no-repeat;
      }

    }

    .section:nth-child(2).current>div{
      .shield{
        img:nth-child(3) {
          transform: translateX(0px);
        }
      }
    }


    .third{
      padding-left: 100px;
      .info{
        width: 631px;
        height: 278px;
        background: url(./images/info_3.png);
      }
      .circle{
        width: 453px;
        height: 449px;
        background: url(./images/circle.png);
        margin: 0 auto;
      }

      .rocket{
        width: 204px;
        height: 204px;
        background: url(./images/rocket.png);
        position: absolute;
        left: -300px;
        bottom: -400px;
        transition: all 1s;
      }
    }
    .third>div{
      display: flex;
      align-items: center;

    }

    .third.current{
      .rocket{
        bottom: 250px;
        left: 1032px;
      }
      .circle{
        animation: circle_move 5s infinite 1s linear;
      }
    }
//66320526
    .fourth>div{
      display: flex;
      align-items: center;
      padding-left: 100px;
    }
    .fourth{
      .search{
        width: 529px;
        height: 320px;
        position: relative;

        .key {
          width: 0;
          height: 20px;
          position: absolute;
          left: 20px;
          top: 24px;
          background: url("./images/key.png") left;

        }
        .input{
          width: 529px;
          height: 66px;
          background: url(./images/search.png);
        }
        .wrap{
          width: 529px;
          height: 393px;
          transform: translateY(-13px);
          overflow: hidden;

          .result{
            width: 100%;
            height: 100%;
            background: url(./images/result.png) no-repeat;
            transform: translateY(-100%);
            transition: all 1s;
            -webkit-transition-delay: 1.5s;
            -moz-transition-delay: 1.5s;
            -ms-transition-delay: 1.5s;
            -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
          }
        }

      }

      .info{
        width: 612px;
        height: 299px;
        background: url(./images/info_4.png);
        margin: 0 auto;
      }
    }

    .fourth.current{
      .key{
        animation: typing 1.5s steps(5)  forwards;
      }
      .wrap{
        .result{
          transform: translateY(0);
        }
      }

    }
  }

}

@keyframes circle_move {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

@keyframes typing {
  0%{
    width: 0;
  }
  100%{
    width: 100px;
  }
}